<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
    <title>p2-4</title>
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 使用v-clock能解决插值表达式闪烁的问题 -->
        <p v-clock>{{msg}}</p>
        <!-- 默认v-text是没有闪烁问题的 -->
        <!-- v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的占位符不会把整个元素的内容清空 -->
        <h4 v-text="msg"></h4>

        <div>{{msg2}}</div>
        <div v-text="msg2"></div>
        <div v-html="msg2"></div>
        <!-- v-bind是vue中提供的用于绑定属性的指令 -->
        <input type="button" value="按钮" v-bind:title="mytitle+'123'">
        <!-- v-bind:可以简写为: -->
        <!-- v-bind中,可以写合法的表达式 -->
        <!-- vue中提供了v-on:时间绑定机制 -->
        <input type="button" value="按钮" :title="mytitle+'123'" v-on:click="show">
        <input type="button" value="按钮" :title="mytitle+'123'" @mouseover="show">
    </div>
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"p2",
            msg2:"<h1>这是一个h1标签</h1>",
            mytitle:"这是一个标题"
        },
        methods:{
            show:function(){
                alert("Hello")
            }
        }
    })
</script>
</html>